<template>
  <div class="wrap">
    <div class="header">
      <div class="left">
        <el-select v-model="queryParams.goodsType" placeholder="请选择变体类型" size="small" style="margin-left: 0px">
          <el-option label="全部变体" value=""></el-option>
          <el-option label="单个SKU" :value="1"></el-option>
          <el-option label="多个SKU" :value="2"></el-option>
        </el-select>
      </div>
      <div class="right">
        <el-input size="small" style="width: 250px" v-model="queryParams.keyword" placeholder="搜索完整Listing ID或SKU"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search"></el-button>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="data"
        row-key="id"
        border
        v-loading="loading"
      >
        <el-table-column
          prop="orderId"
          label="订单编号"
          align="center"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="商品数量"
          align="center"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="用户名"
          align="center"
          min-width="300"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="account"
          label="店铺名"
          align="center"
          min-width="300"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="订单时间"
          align="center"
          min-width="300"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="退货时间"
          align="center"
          min-width="300"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="贴单费用"
          align="center"
          min-width="300"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="操作"
          align="left"
          min-width="300"
        >
          <template slot-scope="{row}">
            <el-button class="mgr10">查看详情</el-button>
            <to-stock-button></to-stock-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 50]"
        :page-size="queryParams.pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ToStockButton from "@/views/order/components/ToStockButton.vue";

export default {
  name: "returnOrderList",
  components: {ToStockButton},
  data(){
    return {
      queryParams:{
        page: 1,
        pageSize: 20,
        keyword: '',
      },
      data: [
        {},
        {}
      ],
      loading: false,
      total: 0,
    };
  }
}
</script>

<style scoped lang="scss">
.wrap {
  padding: 30px 30px;

  .header {
    display: flex;
    justify-content: space-between;
  }

  .content {
    padding: 0 0 0;
    margin-top: 20px;
  }
}
</style>
